<template>
        <div class="poster">
                <el-form ref="ruleForm" :inline="true" :model="params" class="demo-form-inline">
                        <el-form-item label="城市：">
                                <el-select v-model="params.city" filterable clearable @change="loadProject">
                                        <el-option v-for="item in citys"
                                                :key="item.cityId"
                                                :label="item.cityName"
                                                :value="item.cityId"
                                        >
                                        </el-option>
                                </el-select>
                        </el-form-item>
                        <el-form-item label="项目：">
                                <el-select v-model="params.projectId" filterable clearable>
                                        <el-option v-for="(item,index) in projects"
                                                :key="index"
                                                :label="item.projectName"
                                                :value="item.projectId"
                                        >
                                        </el-option>
                                </el-select>
                        </el-form-item>
                        <el-form-item label="开发商：">
                                <el-input v-model="params.developerName" placeholder="请输入开发商名称"></el-input>
                        </el-form-item>
                        <el-form-item>
                                <el-button type="primary" @click="query" id="monitorEnter">查询</el-button>
                                <el-button @click="resetFrom">重置</el-button>
                                <el-button type="primary" @click="add">新增</el-button>
                        </el-form-item>
                </el-form>
                <el-table :data="tableData" v-loading="tableLoading" border stripe>
                        <el-table-column type="index" label="序号" width="80" align="center"></el-table-column>
                        <el-table-column label="城市" prop="cityName" align="center"></el-table-column>
                        <el-table-column label="开发商" prop="devCompany" align="center"></el-table-column>
                        <el-table-column label="项目" prop="projectName" align="center"></el-table-column>
                        <el-table-column label="楼盘" prop="devName" align="center"></el-table-column>
                        <el-table-column label="海报图片"  align="center">
                                <template slot-scope="scope">
                                        <img :src="scope.row.posterUrl" alt="" style="width: 100px;height: 50px;">
                                </template>
                        </el-table-column>
                        <el-table-column label="位置序号" prop="sequence" align="center"></el-table-column>
                        <el-table-column label="操作人" prop="operaterName" align="center"></el-table-column>
                        <el-table-column label="操作时间" prop="updateTime" align="center" :formatter="initTime" sortable></el-table-column>
                        <el-table-column label="操作" align="center">
                                <template slot-scope="scope">
                                        <el-button type="text" size="small" @click="edit(scope.row)">编辑</el-button>
                                        <el-button type="text" size="small" @click="del(scope.row.id)">删除</el-button>
                                </template>
                        </el-table-column>
                </el-table>
                <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="params.pageNum"
                            :page-sizes="[10,20,50,100]"
                            :page-size="params.pageSize"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="total" style="margin-top:30px;">
                 </el-pagination>
        </div>
</template>

<script>
import utils from "../../common/utils"
import api from '@/api/apiPath'
export default {
        name:'postermanage',
        title:'海报配置',
        data(){
                return {
                        citys:[],
                        projects:[],
                        params:{
                                city:"",
                                projectId:"",
                                developerName:"",
                                sort:null,
                                pageNum:1,
                                pageSize:10
                        },
                        tableData:[],
                        tableLoading:false,
                        total:0
                }
        },
        methods:{
                loadCity(){
                        this.axios.post(api.POSTERCAP,{"cityId":""}).then((res)=>{
                                if(res.data.code==200){
                                        this.citys=res.data.data
                                }
                        }).catch((error)=>{
                                console.log(error)
                        })
                },
                loadData(){
                        this.axios.post(api.POSTERLIST,this.params).then((res)=>{
                                if(res.data.code==200){
                                        this.tableData=res.data.data.list;
                                        this.total=res.data.data.total;
                                }
                        }).catch((error)=>{
                                console.log(error)
                        })
                },
                loadProject(){
                        this.params.projectId="";
                        this.axios.post(api.POSTERCAP,{"cityId":this.params.city}).then((res)=>{
                                if(res.data.code==200){
                                        this.projects=res.data.data
                                }
                        }).catch((error)=>{
                                console.log(error)
                        })
                },
                query(){
                        this.loadData();
                },
                resetFrom(formName){
                        this.params.city="";
                        this.params.projectId="";
                        this.params.developerName="";
                },
                initTime(row, column, cellValue, index){
                        return utils.getTimeString(cellValue)
                },
                handleSizeChange(val) {
                        this.params.pageSize = val;
                        this.loadData();
                },
                handleCurrentChange(val) {
                        this.params.pageNum = val;
                        this.loadData();
                },
                add(){
                        this.$router.push({
                                path:"./addposter"
                        })
                },
                edit(val){
                        console.log(val)
                        this.$router.push({
                                path:"./editposter",
                                query:val
                        })
                },
                del(id){
                        this.$confirm("确定删除吗？","提示",{
                                confirmButtonText:"确定",
                                cancelButtonText:"取消",
                                type:"warning"
                        }).then(()=>{
                                this.axios.get(api.DELPOSTER+"/"+id).then((res)=>{
                                        if(res.data.code==200){
                                                this.$alert("操作成功", '提示', {
                                                        type: 'success',
                                                        confirmButtonText: '确定',
                                                        callback: action => {
                                                                this.loadData()
                                                         }
                                                });
                                        }
                                })
                        }).catch((error)=>{
                                console.log(error)
                        })
                }
        },
        mounted(){
                this.loadCity();
                this.loadData();
        },
        activated(){
            this.loadData();
        }
}
</script>

<style lang="stylus">
.poster{
        .el-table .cell{
                white-space:nowrap !important;
        }
}

</style>
